<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1">
	<title>慕课网移动端响应式布局小项目</title>
	<link rel="stylesheet" type="text/css" href="./font-awesome/css/font-awesome.min.css">
	<link rel="stylesheet" type="text/css" href="./css/index.css" />
</head>
<body>
	<div id="app">
		
		<div class="box">
			<div class="header">
				<a href="#" class="header_address">北京</a>
				<a href="#" class="header_form">
					<input ／>
				</a>
				<a href="#" class="header_message">
					<i class="fa fa-comment-o fa-lg"></i>
				</a>
			</div>
			<div class="banner">
				<div class="inner clearfix">
	               <div class="innerwraper"><img src="img/banner1.jpg" alt="" /></div>
	               <div class="innerwraper"><img src="img/banner2.jpg" alt="" /></div>
	               <div class="innerwraper"><img src="img/banner3.jpg" alt="" /></div>
	               <div class="innerwraper"><img src="img/banner4.jpg" alt="" /></div>
	               <div class="innerwraper"><img src="img/banner1.jpg" alt="" /></div>
	           </div>
	           <div class="pagination">
	               <span class="active"></span>
	               <span></span>
	               <span></span>
	               <span></span>
	           </div>
			</div>
			<div class="content">
				<div>
					<img src="./img/1.png"/>
					<span>Html</span>
				</div>
				<div>
					<img src="./img/2.png"/>
					<span>PHP</span>
				</div>
				<div>
					<img src="./img/3.png"/>
					<span>Android</span>
				</div>
				<div>
					<img src="./img/4.png"/>
					<span>Mysql</span>
				</div>
				<div>
					<img src="./img/5.png"/>
					<span>Java</span>
				</div>
			</div>
			<div class="title">
				<span>精品课程</span>
				<span>查看全部></span>
			</div>
			<div class="items">
				<div class="item">
					<div class="item_left"></div>
					<div class="item_center">
						<p>jQuery实战课程</p>
						<p>老师：小小小</p>
						<p><i class="fa fa-weixin fa-lg"></i>微信：fcsboy</p>
						<p><i class="fa fa-clock-o fa-lg"></i>时间：8点半</p>
					</div>
					<div class="item_right">
						<span>3</span><em>折</em>
					</div>
				</div>
				<div class="item">
					<div class="item_left"></div>
					<div class="item_center">
						<p>微信小程序</p>
						<p>老师：小小小</p>
						<p><i class="fa fa-weixin fa-lg"></i>微信：fcsboy</p>
						<p><i class="fa fa-clock-o fa-lg"></i>时间：3点半</p>
					</div>
					<div class="item_right">
						<span>6</span><em>折</em>
					</div>
				</div>
				<div class="item">
					<div class="item_left"></div>
					<div class="item_center">
						<p>RN实战课程</p>
						<p>老师：小小小</p>
						<p><i class="fa fa-weixin fa-lg"></i>微信：fcsboy</p>
						<p><i class="fa fa-clock-o fa-lg"></i>时间：5点半</p>
					</div>
					<div class="item_right">
						<span>3</span><em>折</em>
					</div>
				</div>
				<div class="item">
					<div class="item_left"></div>
					<div class="item_center">
						<p>响应式布局</p>
						<p>老师：小小小</p>
						<p><i class="fa fa-weixin fa-lg"></i>微信：fcsboy</p>
						<p><i class="fa fa-clock-o fa-lg"></i>时间：1点半</p>
					</div>
					<div class="item_right">
						<span>8</span><em>折</em>
					</div>
				</div>
			</div>
		</div>
		<div class="footer">
			<div class="footericon iconactive">
				<a class="icon_a">
					<i class="fa fa-camera-retro fa-lg"></i>
				</a>
				我的
			</div>
			<div class="footericon">
				<a class="icon_a">
					<i class="fa fa-camera fa-lg"></i>
				</a>
				相机
			</div>
			<div class="footericon">
				<a class="icon_a">
					<i class="fa fa-calendar fa-lg"></i>
				</a>
				日历
			</div>
			<div class="footericon">
				<a class="icon_a">
					<i class="fa fa-camera-retro fa-lg"></i>
				</a>
				我的
			</div>
		</div>
	</div>
	<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<script type="text/javascript" src="./js/index.js"></script>
</body>
</html>